<template>
  <div>
    <el-form
      class="query-table-form"
      @submit.native.prevent
      :inline="true"
      :model="params"
      v-if="queryId"
    >
      <el-form-item class="float-right">
        <el-button icon="el-icon-plus" @click="handleRecovery()">追偿登记</el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
      show-summary
      :summary-method="getSummaries"
    ></c-table>

    <!-- <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div> -->

    <recovery-edit
      :visible.sync="recoveryVisbie"
      :query-id="queryId"
      :comps-id="compsId"
      :table-id="recoveryId"
      :form-data="formData"
      @success="getData()"
    ></recovery-edit>

    <recovery-view :visible.sync="viewVisible" :recovery-id="viewId"></recovery-view>
  </div>
</template>

<script>
import RecoveryEdit from '@/credit/views/city/risk/recovery/RecoveryEdit'
import RecoveryView from '@/credit/views/city/risk/recovery/RecoveryView'
import { mapGetters } from 'vuex'
export default {
  components: {
    RecoveryEdit,
    RecoveryView,
  },
  props: {
    compsId: String,
    queryId: String,
  },
  data() {
    return {
      order: {
        create_time: 'desc',
      },
      params: {},
      tableName: 'comps_recovery',
      loading: false,
      tableColumns: [
        {
          attrs: { label: '追偿时间', prop: 'recovery_date', align: 'center' },
          process: v => this.$utils.dateFormat(v, 'yyyy-MM-dd'),
        },
        { attrs: { label: '追偿本金(元)', prop: 'amount', align: 'center' } },
        { attrs: { label: '追偿利息(元)', prop: 'interest', align: 'center' } },
        { attrs: { label: '追偿其他费用(元)', prop: 'recovery_fee', align: 'center' } },
        { attrs: { label: '资金占用年利率(%)', prop: 'funds_use_rate', align: 'center' } },
        { attrs: { label: '资金占用费(元)', prop: 'funds_use_fee', align: 'center' } },
        { attrs: { label: '追偿合计(元)', prop: 'recovery_amount', align: 'center' } },
        { attrs: { label: '登记人', prop: 'submit_person_name', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', width: 130 },
          operations: [
            {
              content: '追偿',
              icon: 'fa fa-edit',
              event: this.handleRecovery,
              ifRender: row => row.submit_person === this.userId && this.queryId,
            },
            {
              content: '查看',
              icon: 'fa fa-search',
              event: this.handleDetail,
            },
          ],
        },
      ],
      tableData: [],
      // totalCount: 0,
      formData: {},
      recoveryId: '',
      recoveryVisbie: false,

      viewVisible: false,
      viewId: '',
    }
  },
  computed: {
    ...mapGetters(['userId']),
  },
  watch: {
    compsId: {
      handler: function () {
        this.params['comps_id.eq'] = this.compsId
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleRecovery(row) {
      this.recoveryVisbie = true
      this.formData = row ? { ...row } : {}
      this.recoveryId = row?.id ?? ''
    },
    handleDetail(row) {
      this.viewVisible = true
      this.viewId = row?.id ?? ''
    },
    getData() {
      // this.params.index = index
      this.tableData = []
      if (!this.compsId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          // const data = res?.data ?? {}
          this.tableData = res?.data ?? []
          // this.totalCount = data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (
          ['amount', 'interest', 'recovery_fee', 'funds_use_fee', 'recovery_amount'].includes(
            column.property
          )
        ) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] += '元'
          } else {
            sums[index] = '-'
          }
        } else {
          sums[index] = '-'
        }
      })
      return sums
    },
  },
}
</script>

<style lang="scss" scoped></style>
